<template>
  <transition name="slide">
    <music-list :bg-img="bgImg" :title="bgTitle" :songs="songs" :rank="rank"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
  import MusicList from 'components/music-list/music-list'
  import {mapGetters} from 'vuex'
  import {getTopMusic} from 'api/rank'
  import {createSong} from 'common/js/song'

  export default {
    data () {
      return {
        songs: [],
        // 歌曲前面有排名
        rank: true
      }
    },
    computed: {
      bgImg () {
        return this.topList.picUrl
      },
      bgTitle () {
        return this.topList.title
      },
      ...mapGetters([
        'topList'
      ])
    },
    created () {
      this._getTopMusic()
    },
    methods: {
      _getTopMusic () {
        // 当在本页刷新无法获取歌单id，
        // 那么就跳转回rank页
        if (!this.topList.id) {
          this.$router.push('/rank')
          return
        }
        getTopMusic(this.topList.id).then((res) => {
          this.songs = this._normallizeSongs(res.data.songlist)
        })
      },
      // 格式化歌曲，创建一个新的Object以配合song-list的格式需求
      _normallizeSongs (list) {
        let ret = []
        list.forEach((item) => {
          const musicData = item.data
          if (musicData.songid && musicData.albumid) {
            ret.push(createSong(musicData))
          }
        })
        return ret
      }
    },
    components: {
      MusicList
    }
  }
</script>

<style scoped lang="stylus">
  .slide-enter-active, .slide-leave-active
    transition: all .3s ease

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
